<nav id="tablist" class="mui-bar mui-bar-tab">
  <a class="mui-tab-item mui-active" href="{:url('/index/index/index')}">
    <span class="mui-icon mui-icon-home"></span>
    <br />
    <span class="">首页</span>
  </a>
  <a class="mui-tab-item" href="{:url('/index/subject/search')}">
    <span class="mui-icon mui-icon-search"></span>
    <br />
    <span class="">搜索</span>
  </a>
  <a class="mui-tab-item" href="
      {if condition="!$Think.cookie.LoginUser"}
        {:url('index/index/login')}
      {else /}
        {:url('index/business.business/index')}
      {/if}
  ">
    <span class="mui-icon mui-icon-person"></span>
    <br>
    <span class="">我的</span>
  </a>

</nav>
<script src="/assets/index/js/mui.min.js"></script>
<script src="/assets/index/js/jquery-1.9.1.min.js"></script>
<script>
  //利用mui进行链接跳转
  mui('#tablist').on('tap', 'a', function(){
      location.href = this.href
  })

  //通过js获取的链接，来判断是哪个链接要有激活状态
  var arr = location.pathname.split('/')
  var path = arr.filter(function(value){
      return value && value.trim()
  })

  //数组的截取
  var str = path.slice(0, 2).join('/')

  if(str == "index/index")
  {
      $("#tablist a").eq(0).addClass('mui-active').siblings().removeClass('mui-active');
  }else if(str == "index/subject")
  {
      $("#tablist a").eq(1).addClass('mui-active').siblings().removeClass('mui-active');
  }
  else if(str == "index/business.business")
  {
      $("#tablist a").eq(2).addClass('mui-active').siblings().removeClass('mui-active');
  }
</script>
